<template>
  <div v-html="content" class="content">
  </div>
</template>

<script>
export default {
  name: "MyLink",
  props: {
    href: {
      type: String
    }
  },
  computed: {
    content() {
      if (this.href) {
        return this.href.replaceAll(/https?:\/\/\S*/ig, (m1) => {
          return '<a target="_blank" href="' + m1 + '">' + m1 + '</a>'
        })
      }
      return ''
    }
  }
}
</script>

<style scoped lang="scss">
.content ::v-deep a {
  color: #4b97de;
  text-decoration: underline;
}
</style>
